<template>
  <div class="height_width-full">
    <div class="breadcrumb">
      <div class="breadcrumb-icon-box">
        <i class="el-icon-location-outline"></i>
      </div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path : '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>供应商</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-divider></el-divider>
    <div>
      <div class="person-search">
        <el-row :gutter="10">
          <el-col :span="3">
            <el-select v-model="search.status" placeholder="全部状态" clearable>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-option :label="item.title" :value="item.value" v-for="item in statusList" :key="item.id"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="search.providerTypeId" placeholder="全部类型" clearable>
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <el-option :label="item.title" :value="item.id" v-for="(item,index) in providerTypeList"
                         :key="index"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-input clearable
                      placeholder="供应商名称"
                      v-model="search.title">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-col>
          <el-col :span="5">
            <el-button type="success" @click="getTableData(1,10)">搜索</el-button>
            <el-button type="primary" @click="goto('/asset-provider-edit' , 'AssetProviderEdit' , {type : 1, data : null})">添加
            </el-button>
          </el-col>
        </el-row>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column type="index"
                         label="序号"
                         width="60">
        </el-table-column>
        <el-table-column
          prop="title"
          label="供应商名称"
          width="210">
        </el-table-column>
        <el-table-column
          label="类型"
          width="150">
          <template slot-scope="scope">
            {{ getProviderTypeName(scope.row.providerTypeId) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="providerName"
          label="联系人"
          width="150">
        </el-table-column>
        <el-table-column
          prop="providerPhone"
          label="移动电话"
          width="160">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200">
          <template slot-scope="scope">
            {{ new Date(scope.row.createTime).format("yyyy-MM-dd hh:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="180">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status == 1"
              active-text="启用"
              inactive-text="禁用"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="statusChange($event , scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="供应商地址详情" placement="top-start">
              <el-button type="success" size="small" icon="el-icon-view"
                         @click="showAddressDetail(scope.row)"></el-button>
            </el-tooltip>
            <el-button type="primary" size="small" icon="el-icon-edit"
                       @click="goto('/asset-edit-provider' , 'AssetProviderEdit' , {type : 0, data : scope.row})"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout=" prev, pager, next, jumper , sizes, total"
          :total="page.totalCount">
        </el-pagination>
      </div>
      <el-dialog title="供应商地址详情" :visible.sync="dialogDetailVisible">
        <div class="detail-text">
          <p>{{ addressDetail.title }} </p>
          <h2>{{ addressDetail.providerAddress }}</h2>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogDetailVisible = false">确&nbsp;&nbsp;定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "AssetProvider",
  data() {
    return {
      addressDetail: {
        title: "",
        providerAddress: ""
      },
      dialogDetailVisible: false,
      search: {
        status: "",
        providerTypeId: "",
        title: ""
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 50, 70, 100],
        totalCount: 0
      },
      tableData: [],
      statusList: [
        {
          title: "启用",
          value: 1
        },
        {
          title: "禁用",
          value: 2
        }
      ],
      providerTypeList: []
    }
  },
  created() {
    this.getTableData(this.page.currentPage, this.page.pageSize);
    this.getProviderTypeList();
  },
  methods: {
    statusChange($event, item) {
      if (!$event) {
        this.$confirm('您确定禁用该供应商吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$put(this.$api.API_PROVIDER_SAVE, {
            id: item.id,
            status: 2
          }).then(res => {
            if (res.data.code == 200) {
              this.$message.success("禁用成功");
              item.status = 2;
            } else {
              this.$message.error("禁用失败");
            }
          })
        }).catch(() => {
          item.status = 1;
        });
      } else {
        this.$put(this.$api.API_PROVIDER_SAVE, {
          id: item.id,
          status: 1
        }).then(res => {
          if (res.data.code == 200) {
            this.$message.success("启用成功");
            item.status = 1;
          } else {
            this.$message.error("启用失败");
          }
        })
      }
    },
    showAddressDetail(data) {
      this.addressDetail = data;
      this.dialogDetailVisible = true;
    },
    getProviderTypeName(id) {
      return this.providerTypeList.filter(item => item.id == id)[0].title;
    },
    getProviderTypeList() {
      this.$get(this.$api.API_PROVIDER_TYPE_LIST).then(res => {
        if (res.data.code == 200) {
          console.log(123, res);
          this.providerTypeList = res.data.data;
        }
      })
    },
    getTableData(pageNum, pageSize) {
      this.$get(this.$api.API_PROVIDER_LIST, {
        status: this.search.status,
        providerTypeId: this.search.providerTypeId,
        title: this.search.title,
        pageNum: pageNum,
        pageSize: pageSize
      }).then(res => {
        console.log(res)
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.page.currentPage = res.data.data.pageNum;
          this.page.pageSize = res.data.data.pageSize;
          this.page.totalCount = res.data.data.total;
        }
      })
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(data) {
      this.page.pageSize = data;
      this.getTableData(this.page.currentPage, data);
    },
    handleCurrentChange(data) {
      this.getTableData(data, this.page.pageSize);
    },
    goto(path, name, data) {
      this.$router.push({
        path, name
      })
      this.Storage.Session.set("providerData", data);
    },
  },
}
</script>

<style scoped>
.page-box {
  margin-top: 10px;
}

.person-search {
  margin-bottom: 20px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
